<template>
  <div class="main">

    <div class="down-app" :style="'background-image:url('+ bgApp +');background-color: rgb(75, 81, 84);'">
      <div v-if="!isLogin && inWechat()" style="margin:15px;">
        <van-button block type="primary" @click="login">登录并下载APP</van-button>
      </div>
      <div v-if="!inApp && ((inWechat() && isLogin) || (!inWechat()))" style="margin:15px;">
        <van-button style="margin-top: 30px;" block type="primary" @click="open">下载APP打开</van-button>
      </div>
      <div class="mt40 " style="display: flex;flex-direction: column;align-items: center;">
        <img v-if="systemForm && systemForm.qrCodeImage" style="width: 320px;height: auto;" :src="systemForm.qrCodeImage" alt="">
        <img v-else style="width: 320px;height: auto;" src="../../../assets/images/icon_qr_bcg.jpeg" alt="">
        <img :src="url" style="width:100px;height:100px; margin-top: -125px;margin-bottom: 100px;margin-left: 5px;">
      </div>
    </div>
    <div v-show="showGuide" class="zhezhao" />
  </div>
</template>

<script>
import BgApp from '@/assets/images/bg_app.png'
import CompanyLogo from '@/assets/images/company-logo.png'
import { mapGetters } from 'vuex'
import crudCommission from '@/api/system/commission'
import { getToken } from '@/utils/auth'
import QRCode from 'qrcode'
export default {
  name: 'AppIntro',
  data: () => {
    return {
      bgApp: BgApp,
      companyLogo: CompanyLogo,
      showGuide: false,
      url: null,
      systemForm: null
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ]),
    isLogin() {
      return getToken()
    },
    inApp() {
      return this.$route.query.app
    }
  },
  mounted() {
    const user = this.$store.getters.user
    if (this.isLogin && user && this.$route.query.pid && this.$route.query.pid.length > 0) {
      // 当前用户的没有上级或者
      const fixedParent = user.appLoginTime && user.pid
      if (!fixedParent && user.pid !== parseInt(this.$route.query.pid)) {
        // 重新登录
        this.logout()
      }
    }
    crudCommission.getSystemParams().then(value => {
      this.systemForm = value
    })
    QRCode.toDataURL('https://www.wenyide.com/share-info?pid=' + this.$route.query.pid, (err, url) => {
      this.url = url
      console.log(err)
    })
  },
  methods: {
    login() {
      this.$router.push(`/phone-login?pid=${this.$route.query.pid}&redirect=${this.$route.fullPath}`) // 否则全部重定向到登录页
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
      })
    },
    open() {
      var is_weixin = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
      if (is_weixin) {
        this.showGuide = is_weixin
      } else {
        this.openApp('lawquery://article?id=' + this.$route.query.id + '&pid=' + this.$route.query.pid, () => {
          this.downloadApp()
          this.$message.success('正在为您下载问易得应用，请于下载完成后安装打开应用查看文章')
        })
      }
    },
    inWechat() {
      console.log(navigator.userAgent.toLowerCase())
      return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
    },
    /**
    * 唤起app
    * @param {any} uri  app schema
    * @param {any} fallback  唤起失败回调
    */
    openApp(uri, fallback) {
      const ifr = document.createElement('iframe')
      ifr.src = uri
      ifr.style.display = 'none'
      if (fallback) {
        this.checkOpen((opened) => {
          if (!opened) {
            fallback()
          }
        })
      }
      document.body.appendChild(ifr)
      setTimeout(() => {
        document.body.removeChild(ifr)
      }, 2000)
    },
    downloadApp() {
      // 判断是Android还是iOS
      const u = navigator.userAgent
      let system = ''
      if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
        system = 'Android'
      } else if (u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        system = 'iOS'
      } else {
        system = 'unknown'
      }
      // 根据系统不同，跳转不同的下载APP地址
      if (system === 'Android') {
        window.location = 'https://www.wenyide.com/file/apk/app-release.apk'
      } else if (system === 'iOS') {
        window.location = 'https://apps.apple.com/cn/app/%E9%97%AE%E6%98%93%E5%BE%97%E6%B3%95%E5%BE%8B%E5%92%A8%E8%AF%A2/id1636311536'
      }
    },
    // 检查app是否打开
    checkOpen(cb) {
      const clickTime = +(new Date())
      function check(elsTime) {
        if (elsTime > 3000 || document.hidden || document.webkitHidden) {
          cb(true)
        } else {
          cb(false)
        }
      }
      // 启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
      let count = 0
      let intHandle = null
      intHandle = setInterval(() => {
        count++
        const elsTime = +(new Date()) - clickTime
        if (count >= 100 || elsTime > 3000) {
          clearInterval(intHandle)
          check(elsTime)
        }
      }, 20)
    }
  }
}
</script>

<style lang="scss" scoped>
.down-app {
  background-size: cover;
    background-color: #636363;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
}
.yy-header {
    height: 78px;
    width: 100%;
    top: 0;
    z-index: 88888;
    -webkit-box-shadow: 0 2px 7px 0 rgb(153 153 153 / 40%);
    background-image: initial;
    background-color: rgb(24, 26, 27);
    box-shadow: rgb(82 88 92 / 40%) 0px 2px 7px 0px;
}
.yy-container {
    margin: 0 auto;
}
.fl {
    float: left!important;
}
.yy-header .logo img {
    height: 78px;
}
.mt40 {
    margin-top: 40px!important;
}
.down-app .app-desc {

    color: rgb(232, 230, 227);
}
.fr {
    float: right!important;
}
.f35 {
    font-size: 35px;
}
.f22 {
    font-size: 22px;
}
.yy-footer {
  overflow: hidden;
  width: 100%;
  height: 366px;
  color: #cecece;
  background: #323232;
}
.yy-footer .footer-items {
  padding: 40px 0;
}
.zhezhao{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../../assets/images/bgzz.png") center center;
  background-size: 100%;
  position: fixed;
  top:0;
  bottom: 0;
  left:0;
  right: 0;
}

</style>
